<div class="md-stepper" ng-class="{ 'md-active': $ctrl.isActive() }">
    <md-steppers-header class="md-steppers-header md-steppers-vertical">
        <md-button class="md-stepper-indicator" ng-class="{
                    'md-active': $ctrl.stepNumber === $ctrl.$stepper.currentStep,
                    'md-completed': $ctrl.$stepper.isCompleted($ctrl.stepNumber),
                    'md-error': $ctrl.hasError,
                    'md-stepper-optional': $ctrl.optional || $ctrl.hasError
                }" ng-click="$ctrl.$stepper.goto($ctrl.stepNumber)"
                   ng-disabled="$ctrl.$stepper.linear || $ctrl.stepNumber === $ctrl.$stepper.currentStep"
                   aria-label="{{ $ctrl.label }}">
            <div class="md-stepper-indicator-wrapper">
                <md-button class="md-fab md-primary md-stepper-numbers" md-no-ink
                           ng-disabled="!$ctrl.$stepper.isCompleted($ctrl.stepNumber) && $ctrl.stepNumber !== $ctrl.$stepper.currentStep"
                           ng-hide="$ctrl.$step.hasError"
                           aria-label="{{ ::$ctrl.stepNumber+1 }}">
                    <span ng-if="!$ctrl.$stepper.isCompleted($ctrl.stepNumber)">{{ ::$ctrl.stepNumber+1 }}</span>
                    <md-icon md-svg-icon="steppers-check" class="md-stepper-icon md-warn"
                             ng-if="$ctrl.$stepper.isCompleted($ctrl.stepNumber)"></md-icon>
                </md-button>
                <div class="md-stepper-error-indicator md-warn" ng-show="$ctrl.hasError">
                    <md-icon md-svg-icon="steppers-warning"></md-icon>
                </div>

                <div class="md-stepper-title">
                    <span>{{ $ctrl.label }}</span>
                    <small ng-if="$ctrl.optional && !$ctrl.hasError">{{ $ctrl.optional }}</small>
                    <small class="md-stepper-error-message" ng-show="$ctrl.hasError">
                        {{ $ctrl.message }}
                    </small>
                </div>
            </div>
        </md-button>
        <div class="md-stepper-feedback-message" ng-show="stepper.hasFeedback">
            {{stepper.feedbackMessage}}
        </div>
    </md-steppers-header>
    <md-steppers-scope layout="column" class="md-steppers-scope" ng-if="$ctrl.isActive()"
                       ng-transclude></md-steppers-scope>
</div>